<template>
    <div>
        <avue-crud ref="crudorder"
                   :data="data"
                   :option="option"
                   :page.sync="page"
                   :search.sync="search"
                   :table-loading="loading"
                   :cell-style="cellStyle"
                   @on-load="onLoad"
                   @refresh-change="onLoad"
                   @search-change="searchChange">
            <!-- 启用/禁用插槽(默认提供,按需使用) -->
            <template slot-scope="{row,index,type,size}" slot="disable">
                <el-switch v-model="row.disable" @change="updDisable(row)"
                           active-color="#13ce66" inactive-color="#ff4949"
                           :active-value=0 :inactive-value=1
                           active-text="" inactive-text="">
                </el-switch>
            </template>
            <template slot-scope="{row,index,type,size}" slot="menu">
                <el-button icon="el-icon-edit" :size="size" :type="type" @click="updRow(row,1)">编辑</el-button>
                <el-button v-if="row.state == 1" icon="el-icon-edit" :size="size" :type="type" @click="updRow(row,3)">改价</el-button>
                <el-button v-if="row.state == 2" :size="size" :type="type" @click="updRow(row,4)">发货</el-button>
                <el-button :size="size" :type="type" @click="updRow(row,5)">详情</el-button>
                <el-button :size="size" :type="type" @click="updRow(row,2)">日志记录</el-button>
                <!-- <el-button icon="el-icon-delete" :size="size" :type="type" @click="rowDel(row,index)">删除</el-button> -->
            </template>
        </avue-crud>
        <el-dialog title="编辑" v-dialogDrag v-if="updDialogVisible" :visible.sync="updDialogVisible" :width="dialogWidth" top="6vh" @close="closeDialog">
            <Upd :closeDialog="closeDialog" :uri="uri" :rowData="rowData"></Upd>
            <span slot="footer" class="dialog-footer"></span>
        </el-dialog>
        <el-dialog title="日志记录" v-dialogDrag v-if="orderLogDialogVisible" :visible.sync="orderLogDialogVisible" :width="dialogWidth" top="6vh" @close="closeDialog">
            <Log :closeDialog="closeDialog" :uri="uri" :rowData="rowData"></Log>
            <span slot="footer" class="dialog-footer"></span>
        </el-dialog>
        <el-dialog title="详情" v-dialogDrag v-if="orderDetailsDialogVisible" :visible.sync="orderDetailsDialogVisible" :width="dialogWidth" top="6vh" @close="closeDialog">
            <Details :closeDialog="closeDialog" :uri="uri" :rowData="rowData"></Details>
            <span slot="footer" class="dialog-footer"></span>
        </el-dialog>
    </div>
</template>


<script>
    export default {
        components: {
            Upd: () => import('./orderUpd'),
            Log: () => import('./orderLog'),
            Details: () => import('./orderDetails')
        },
        data() {
            return {
                uri: {
                    infoList: "/api/admin/all/order/findPage",
                    info: "/api/admin/all/order",
                    orderLogInfoList: "/api/admin/all/orderLog/findPage",  // 订单日志
                    updTotalPrice: "/api/admin/all/order/updTotalPrice",   //改价
                    deliverGoods: "/api/admin/all/order/deliverGoods",   //发货

                },
                loading: true,
                dialogWidth: "60%",
                addDialogVisible: false,
                updDialogVisible: false,
                orderLogDialogVisible: false,
                orderDetailsDialogVisible: false,
                page: this.website.pageParams,
                search: {},
                data: [],
                rowData: {},
                option: {},
            }
        },
        mounted() {
            this.option = JSON.parse(JSON.stringify(this.website.optionConfig));
            this.option.menuPosition = "left"
            this.option.menuAlign = "left"
            //this.option.menuWidth:380
            this.option.column = [
                {
                    label: '订单号',
                    prop: 'orderNo',
                    search: true,
                    searchSpan: 5,
                    overHidden: true,
                },
                {
                    label: '下单人',
                    prop: 'keyword',
                    search: true,
                    searchSpan: 5,
                    overHidden: true,
                    formatter: (row) => {
                        return row.fullName != null ? row.fullName : "" + "  " + row.nickname != null ? row.nickname : "";
                    }
                },
                {
                    label: '单价*数量',
                    prop: 'unitPrice',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                    formatter: (row) => {
                        return row.unitPrice + " * " + row.num;
                    }
                },
                {
                    label: '总价',
                    prop: 'totalPrice',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                },
                {
                    label: '商品/规格',
                    prop: 'goodsName',
                    search: true,
                    searchSpan: 5,
                    overHidden: true,
                    formatter: (row) => {
                        var goodsDetails = JSON.parse(row.goodsDetails);
                        if (goodsDetails != null && goodsDetails.goodsSpecsList != null) {
                            return goodsDetails.name + " / " + goodsDetails.goodsSpecsList[0].specsName;
                        } else {
                            return "-";
                        }
                    }
                },
                {
                    label: '订单状态 ',
                    prop: 'state',
                    type: 'select',
                    search: true,
                    searchSpan: 5,
                    overHidden: true,
                    dicData: this.dict.get('ORDER_STATE'),
                },
                {
                    label: '物流单号',
                    prop: 'logisticsNo',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                },
                {
                    label: '用户备注 ',
                    prop: 'userRemark',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                },
                {
                    label: '平台备注 ',
                    prop: 'platformRemark',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                },
                {
                    label: '创建时间',
                    prop: 'createTime',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                },

                {
                    label: '支付时间',
                    prop: 'payTime',
                    search: false,
                    searchSpan: 5,
                    overHidden: true,
                },
            ]
        },
        // 情况1、路由已打开，监听路由参数变化查询发起查询
        watch: {
            // 监听路由参数变化, 让其支持消息点击跳转，并能携带动态参数进行查询
            // 携带将与搜索框搜索参数同步
            $route() {
                // 设置url 参数到搜索条件中
                this.setSearchByUrlParams();
                // 调用查询
                this.onLoad();
            },
        },

        // 情况2、首次打开路由，提前设置默认查询参数 (该事件优先于查询触发)
        created() {
            // 设置url 参数到搜索条件中
            this.setSearchByUrlParams();
        },
        activated: function () {
            this.crud.doLayout(this, this.$refs.crudorder)
        },
        methods: {
            onLoad() {
                this.crud.list(this, true);
                this.crud.doLayout(this, this.$refs.crudorder)
            },
            searchChange(params, done) {
                console.debug(params)
                this.page.currentPage = 1;
                this.onLoad();
                done();
            },
            /**
             * 设置url 参数到搜索条件中
             */
            setSearchByUrlParams() {
                // 添加 url 中的参数为查询条件
                let params = new URLSearchParams(window.location.href.split('?')[1]);
                // 清除之前的搜索条件
                for (let searchKey in this.search) {
                    delete this.search[searchKey];
                }
                // 并同步搜索参数
                params.forEach((value, key) => {
                    this.search[key] = value;
                });
            },
            closeDialog(isRefresh) {
                console.log("关闭=======")
                this.addDialogVisible = false;
                this.updDialogVisible = false;
                this.orderLogDialogVisible = false;
                this.orderDetailsDialogVisible = false;
                this.rowData = {};
                if (isRefresh != null && isRefresh) {
                    this.onLoad();
                }
            },
            updRow(row, type) {
                this.rowData = row;
                switch (type) {
                    case 1:
                        this.updDialogVisible = true;
                        break;
                    case 2:
                        this.orderLogDialogVisible = true;
                        break;
                    case 3:
                        // 改价
                        this.updPrice(row);
                        break;
                    case 4:
                        // 发货
                        this.shipments(row);
                        break;
                    case 5:
                        // 详情
                        this.orderDetailsDialogVisible = true;
                        break;
                    default:
                        this.$message.error('操作类型错误');
                        break;
                }
            },
            rowDel(row, index) {
                this.crud.delRow(this, this.uri.info, row.id, index);
            },
            // 启用/禁用
            updDisable(row) {
                this.crud.put(this.uri.info + "/" + row.id, {disable: row.disable});
            },
            // 改价
            updPrice(row) {
                this.$DialogForm.show({
                    title: '修改价格 -- 【' + row.nickname + '】的订单 【' + row.orderNo + '】',
                    width: '30%',
                    data: {totalPrice: row.totalPrice},
                    option: {
                        submitText: '确认改价',
                        emptyText: '取消',
                        span: 24,
                        column: [
                            {
                                label: "价格",
                                prop: "totalPrice",
                                rules: [{
                                    required: true,
                                    message: "请输入价格",
                                    trigger: "blur"
                                }],
                            }
                        ]
                    },
                    callback: (res) => {
                        this.crud.put(this.uri.updTotalPrice + "/" + row.id, null, {totalPrice: res.data.totalPrice}).then((data) => {
                            res.close()
                            this.onLoad();
                        })
                    }
                })
            },
            // 发货
            shipments(row) {
                let addressDetails = JSON.parse(row.addressDetails);
                let addressDetailsStr = addressDetails.fullName + " " + addressDetails.phone
                    + "\r\n" + addressDetails.province + " " + addressDetails.city + " " + addressDetails.area
                    + "\r\n" + addressDetails.specificAddress

                this.$DialogForm.show({
                    title: '发货 -- 【' + row.nickname + '】的订单 【' + row.orderNo + '】',
                    width: '30%',
                    data: {totalPrice: row.totalPrice, address: addressDetailsStr},
                    option: {
                        submitText: '确认发货',
                        emptyText: '取消',
                        span: 24,
                        column: [
                            {
                                label: "收货地址",
                                prop: "address",
                                type: "textarea",
                                disabled: true,
                            },
                            {
                                label: "物流单号",
                                prop: "logisticsNo"
                            }
                        ]
                    },
                    callback: (res) => {
                        this.crud.put(this.uri.deliverGoods + "/" + row.id, null, {logisticsNo: res.data.logisticsNo}).then((data) => {
                            res.close()
                            this.onLoad();
                        })
                    }
                })
            },

            cellStyle({row, column}) {
                if (column.property == "state") {
                    if (row.state == 1) {
                        return {color: 'BlueViolet'}
                    } else if (row.state == 2 || row.state == 3 || row.state == 4) {
                        return {color: 'green'}
                    } else if (row.state == 5 || row.state == 6 || row.state == 7 || row.state == 8) {
                        return {color: 'red'}
                    }
                    // fontWeight: 'bold',fontSize: '20'
                }
            }
        }
    }
</script>
